<template>
  <div class="app-container">
    <div class="info-title">
      <span>隐患治理详细信息</span>
      <router-link to="/workbench/rectify/index" class="info-back">
        <el-button type="primary">返回列表</el-button>
      </router-link>
    </div>
    <el-row :gutter="12">
      <!--基本信息-->
      <el-col :span="8">
        <div class="info-header">
          <span>隐患名称:{{ infoRectify.dangerName }}</span>
          <!-- <span>{{
            infoRectify.dangerState
              ? parseShowDangerState(infoRectify.dangerState)
              : "---"
          }}</span> -->
          <img
            v-if="infoRectify.dangerState == '1'"
            src="@/assets/prevent/wait-accept.png"
          />
          <img
            v-if="infoRectify.dangerState == '5'"
            src="@/assets/prevent/wait-allocation.png"
          />
          <img
            v-if="
              infoRectify.dangerState == '0' ||
              infoRectify.dangerState == '2' ||
              infoRectify.dangerState == '3'
            "
            src="@/assets/prevent/wait-rectify.png"
          />
          <img
            v-if="infoRectify.dangerState == '9'"
            src="@/assets/prevent/wait-complete.png"
          />
        </div>
        <!--相关附件-->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">相关文件资源</span>
            </div>
          </template>
          <div class="body">
            <div class="info-item" style="height: 168px">
              <span>现场信息:</span
              ><span>
                <ul
                  v-if="infoRectify.dangerImg"
                  class="el-upload-list el-upload-list--picture-card"
                >
                  <li
                    class="el-upload-list__item is-ready"
                    v-for="(item, index) in srcList"
                  >
                    <img
                      class="el-upload-list__item-thumbnail"
                      @click="handlePictureCardPreview(item)"
                      :src="item"
                    />
                  </li>
                </ul>
              </span>
            </div>
            <div class="info-item">
              <span>隐患整改通知单:</span>
              <span v-if="infoRectify.noticeRectification" class="info-pdf">
                <img src="@/assets/common/icon_pdf.png" />
                <span>
                  {{
                    infoRectify.noticeRectification
                      ? parseFileName(infoRectify.noticeRectification)
                      : "---"
                  }}
                </span>
                <el-button type="primary" @click="handlePdfPreview">预览</el-button>
              </span>
              <span v-else>---</span>
            </div>
            <div class="info-item" style="height: 168px">
              <span>验收材料:</span
              ><span>
                <ul
                  v-if="infoRectify.checkAcceptDesc"
                  class="el-upload-list el-upload-list--picture-card"
                >
                  <li
                    class="el-upload-list__item is-ready"
                    v-for="(item, index) in infoRectify.checkAcceptDesc.split(',')"
                  >
                    <img
                      class="el-upload-list__item-thumbnail"
                      @click="handlePictureCardPreview(item)"
                      :src="item"
                    />
                  </li>
                </ul>
              </span>
            </div>
          </div>
        </el-card>
        <!--系统信息--->
        <el-card class="box-card" style="margin-top: 12px">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">其他信息</span>
            </div>
          </template>
          <div class="body">
            <div class="info-item">
              <span>创建人:</span><span>{{ infoRectify.createdBy }}</span>
            </div>
            <div class="info-item">
              <span>创建时间:</span><span>{{ parseTime(infoRectify.createdAt) }}</span>
            </div>
            <div class="info-item">
              <span>更新人:</span
              ><span>{{ infoRectify.updatedBy ? infoRectify.updatedBy : "---" }}</span>
            </div>
            <div class="info-item">
              <span>更新时间:</span
              ><span>{{
                infoRectify.updatedAt ? parseTime(infoRectify.updatedAt) : "---"
              }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="16">
        <!--隐患的基本信息-->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">隐患信息</span>
            </div>
          </template>
          <div class="body">
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患名称:</span><span>{{ infoRectify.dangerName }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>风险分析单元:</span><span>{{ riskUnitName }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患来源:</span
                  ><span>{{
                    infoRectify.dangerSrc
                      ? parseShowDangerSrc(infoRectify.dangerSrc)
                      : "---"
                  }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患类型:</span
                  ><span>{{
                    infoRectify.hazardDangerType
                      ? parseShowDangerTypeName(infoRectify.hazardDangerType)
                      : "---"
                  }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患等级:</span>
                  <span>{{
                    infoRectify.dangerType
                      ? parseShowDangerType(infoRectify.dangerType)
                      : "---"
                  }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患状态:</span>
                  <span>{{
                    infoRectify.dangerState
                      ? parseShowDangerState(infoRectify.dangerState)
                      : "---"
                  }}</span>
                </div>
              </el-col>
            </el-row>
            <div class="info-item">
              <span>隐患描述:</span><span>{{ infoRectify.dangerDesc }}</span>
            </div>
            <div class="info-item">
              <span>原因分析:</span
              ><span>{{
                infoRectify.dangerReason ? infoRectify.dangerReason : "---"
              }}</span>
            </div>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患登记人:</span><span>{{ infoRectify.registrant }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>隐患登记时间:</span>
                  <span>{{ parseTime(infoRectify.registTime) }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <!--隐患治理信息-->
        <el-card class="box-card" style="margin-top: 8px">
          <template #header>
            <div class="card-header">
              <span style="font-size: 18px; font-weight: 800">隐患治理信息</span>
            </div>
          </template>
          <div class="body">
            <div class="info-item">
              <span>整改措施:</span
              ><span>{{
                infoRectify.controlMeasures ? infoRectify.controlMeasures : "---"
              }}</span>
            </div>
            <div class="info-item">
              <span>资金来源:</span>
              <span>
                {{ infoRectify.controlMeasures ? infoRectify.controlMeasures : "---" }}
              </span>
            </div>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>责任部门:</span><span>{{ infoRectify.liableDeptName }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>责任人:</span><span>{{ infoRectify.liablePerson }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>整改期限:</span>
                  <span>{{ parseTime(infoRectify.dangerManageDeadline) }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>实际整改时间:</span>
                  <span>{{ parseTime(infoRectify.dangerManageDeadline) }}</span>
                </div>
              </el-col>
            </el-row>

            <div class="info-item">
              <span>整改备注:</span
              ><span>{{ parseTime(infoRectify.dangerManageDeadline) }}</span>
            </div>
            <el-row :gutter="12">
              <el-col :span="12">
                <div class="info-item">
                  <span>验收部门:</span
                  ><span>{{
                    infoRectify.checkAcceptDeptName
                      ? infoRectify.checkAcceptDeptName
                      : "---"
                  }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span>验收人:</span
                  ><span>{{
                    infoRectify.checkAcceptPerson ? infoRectify.checkAcceptPerson : "---"
                  }}</span>
                </div>
              </el-col>
            </el-row>
            <div class="info-item">
              <span>验收标准:</span
              ><span>{{
                infoRectify.acceptanceStandard ? infoRectify.acceptanceStandard : "---"
              }}</span>
            </div>
            <div class="info-item">
              <span>验收时间:</span
              ><span>{{
                infoRectify.checkAcceptTime
                  ? parseTime(infoRectify.checkAcceptTime)
                  : "---"
              }}</span>
            </div>
            <div class="info-item">
              <span>验收备注:</span
              ><span>{{
                infoRectify.checkAcceptComment ? infoRectify.checkAcceptComment : "---"
              }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--图片预览对话框-->
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
    <!--PDF文件预览对话框-->
    <el-dialog title="PDF文件预览" v-model="openPDF" width="60%" append-to-body>
      <PDFView :pdfUrl="infoRectify.noticeRectification" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelPdfPreview">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="MyRectifyInfo">
import PDFView from "@/components/PDFPreview";
import { getRectifyTaskInfo } from "@/api/prevent/workbench/myRectify";
import { getUnitInfo } from "@/api/prevent/risk/unit";
import { listDangerType } from "@/api/prevent/hidden/dangerType";
import { listHiddenLevel } from "@/api/prevent/hidden/hiddenLevel";
import { listCheckListType } from "@/api/prevent/hidden/checkListType";
import { listDangerState } from "@/api/prevent/hidden/dangerState";
const infoRectify = ref([]);
const loading = ref(false);
const riskUnitName = ref("---");
const dangerTypeOptions = ref([]); //隐患类型选择选
const hiddenLevelOptions = ref([]); //隐患等级选择项
const hiddenCheckListTypeOptions = ref([]); //隐患排查清单类型选择项
const dangerStateOptions = ref([]); //隐患状态选择项
const url = ref("");
const srcList = ref([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const openPDF = ref(false);
const route = useRoute();
(() => {
  const processId = route.params && route.params.processId;
  if (processId) {
    loading.value = true;
    getRectifyTaskInfo(processId).then((response) => {
      infoRectify.value = response.data;
      loading.value = false;
      //console.log(response.data.riskAnalysisUnit);
      if (infoRectify.value.dangerImg != null && infoRectify.value.dangerImg != "") {
        srcList.value = infoRectify.value.dangerImg.split(",");
        url.value = srcList.value[0];
      }
    });
  }
})();

/** 获取风险分析单元详细信息 */
function getUnit(riskUnitId) {
  getUnitInfo(riskUnitId).then((response) => {
    //return response.data.riskUnitName;
    riskUnitName.value = response.data.riskUnitName;
  });
}

/** 处理隐患类型呈现数据 */
function parseShowDangerTypeName(id) {
  if (dangerTypeOptions.value.length < 1) return "----";
  var itemTarget = dangerTypeOptions.value.filter((item) => {
    return item.hazardDangerTypeId == id;
  });
  return itemTarget[0].hazardDangerTypeName;
}

/** 处理隐患等级数据呈现 */
function parseShowDangerType(id) {
  if (hiddenLevelOptions.value.length < 1) return "----";
  var itemTarget = hiddenLevelOptions.value.filter((item) => {
    return item.hiddenLevelId == id;
  });
  return itemTarget[0].hiddenLevelName;
}

/** 处理隐患来源数据呈现 */
function parseShowDangerSrc(id) {
  if (hiddenCheckListTypeOptions.value.length < 1) return "----";
  var itemTarget = hiddenCheckListTypeOptions.value.filter((item) => {
    return item.hiddenListTypeId == id;
  });
  return itemTarget[0].hiddenListTypeName;
}

/** 处理隐患状态数据呈现 */
function parseShowDangerState(id) {
  console.log(dangerStateOptions.value);
  if (dangerStateOptions.value.length < 1) return "----";
  var itemTarget = dangerStateOptions.value.filter((item) => {
    return item.dangerStateId == parseInt(id);
  });
  return itemTarget[0].dangerStateName;
}

/** 获取隐患类型选择项列表 */
async function getDangerTypeList() {
  listDangerType().then((response) => {
    dangerTypeOptions.value = response.data;
  });
}

/** 获取隐患等级选择项列表 */
async function getHiddenLevelList() {
  listHiddenLevel().then((response) => {
    hiddenLevelOptions.value = response.data;
  });
}

/** 获取隐患排查清单类型选择项列表 */
async function getHiddenCheckListTypeList() {
  listCheckListType().then((response) => {
    hiddenCheckListTypeOptions.value = response.data;
  });
}

/** 获取隐患状态选择项列表 */
async function getDangerStateList() {
  listDangerState().then((response) => {
    dangerStateOptions.value = response.data;
  });
}

/** 预览图片 */
function handlePictureCardPreview(file) {
  dialogImageUrl.value = file;
  dialogVisible.value = true;
}

/** 预览PDF文件 */
function handlePdfPreview() {
  openPDF.value = true;
}

/** 取消PDF预览 */
function cancelPdfPreview() {
  openPDF.value = false;
}

/** 截取文件名字 */
function parseFileName(url) {
  const arr = url.split("/");
  return arr[arr.length - 1];
}

/** 下载 */
function downloadPDF() {
  const a = document.createElement("a");
  a.href = infoRectify.noticeRectification;
  a.click();
}

getDangerTypeList();
getHiddenLevelList();
getHiddenCheckListTypeList();
getDangerStateList();
</script>
<style scoped lang="scss">
.info-title {
  height: 48px;
  width: 100%;
  padding: 0 18px;
  border-radius: 5px;
  background-color: #f6f8fa;
  color: #2c2c2c;
  margin: -6px 0 15px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  & .info-back {
    color: #0086ff;
  }
  & span {
    font-weight: 800;
  }
}
.info-header {
  width: 100%;
  height: 116px;
  background: url(./../../../assets/prevent/total_bg.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding-left: 20px;
  & span:nth-child(1) {
    width: 70%;
    height: 33px;
    font-size: 24px;
    line-height: 33px;
    font-weight: 600;
    color: #fff;
    line-height: 33px;
    // overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    //overflow: hidden;
    word-wrap: normal;
  }
  //   & span:nth-child(2) {
  //     height: 33px;
  //     font-size: 14px;
  //     line-height: 33px;
  //     font-weight: 800;
  //     color: red;
  //     line-height: 33px;
  //   }
  & img {
    width: 98px;
    height: 98px;
  }
}
.info-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  min-height: 42px;
  padding: 18px;
  margin-bottom: 8px;
  font-size: 12px;
  background-color: #f6f8fa;
  //   -webkit-line-clamp: 3;
  //   -webkit-box-orient: vertical;
  //   word-break: break-all;
  //overflow: hidden;
  // word-wrap: normal;
  border-radius: 5px;
  &:hover {
    margin: 5px;
    font-size: 16px;
  }
  & span:nth-child(1) {
    width: 180px;
    font-weight: 800;
    color: #9e9e9e;
  }
  & span:nth-child(2) {
    margin-left: 20px;
    font-size: 14px;
  }
}

.info-pdf {
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  & span {
    width: 50%;
    word-wrap: normal;
    overflow: hidden;
  }
  & img {
    height: 28px;
    width: 28px;
  }
}
</style>
